<template>
	<div class="order" style="padding-top:60rpx;">
        <step :active="1"></step>
		<div class="address-container">
			<view class="address-list">
				<view class="li" @click="setAddress">
					<label class="item-address">
					<div class="address-list-left" v-if="addressData">
						<div class="address-list-left-top">
							<h3><span class="hd-icon">&#xe607;</span>{{addressData.name}}</h3>
							<h3><span class="hd-icon">&#xe63c;</span>{{addressData.mobile}}</h3>
						</div>
						<p class="address-list-left-bottom">{{addressData.province+addressData.city+addressData.qu}} {{addressData.address}}</p>
					</div>
					<div class="address-list-left" v-else>
						<div class="address-list-left-top" style="margin-bottom:0">
							<h3>您还没有地址，点击这里添加</h3>
						</div>
					</div>
					<span class="hd-icon">&#xe601;</span>
					</label>
				</view>
			</view>
		</div>
		<div class="goods-contianer">
			<view class="goods-list" v-for="(item,index) in shoppingCard" :key="index" >
				<div v-if="item.name"  class="goods-item-shop" @click="go('./index?id='+item.id)">
					<i class="hd-icon">&#xe767;</i>
					<span>{{item.name}}</span>
					<i class="hd-icon">&#xe601;</i>
				</div>
				<div v-else  class="goods-item-shop" >
					<i class="hd-icon">&#xe767;</i>
					<span>暂无店铺名称</span>
					<i class="hd-icon">&#xe601;</i>
				</div>
				<view class="li" v-for="(goods, indexItem) in item.list" :key="indexItem">
					<div class="goods-item-top">
						<img  :src="goods.logo"  @click="go('/pages/goods/details?id='+goods.id)"/>
						<div class="goods-item">
							<h3 @click="go('/pages/goods/details?id='+goods.id)">{{goods.title}}</h3>
							<div>
								<h4>{{goods.sku_name?'规格：'+goods.sku_name:''}}</h4>
							</div>
							<view class="grace-space-between" style="margin-top:10rpx;">
							    <text  class="grace-shoppingcard-goods-price">￥{{goods.money}}</text>
							    <view class="grace-shoppingcard-goods-number">
							    	<view style="margin-right:20rpx;" class="numbutton" @tap="clearNum(goods,index,indexItem,item)">-</view>
							    	<view class="num">{{goods.buyNum}}</view>
							    	<view style="margin-left:20rpx;" class="numbutton" @tap="addNum(goods,index,indexItem,item)">+</view>
							    </view>
							</view>
						</div>
					</div>
				</view>
			</view>
		</div>
		<div class="item-input">
			<label>留言</label>
			<div class="msg" >
				<input placeholder-style="color:#ccc" type="text" v-model="beizhu" placeholder="有什么想对商家说的可以写在这里哦~" />
			</div>
		</div>
		<div class="item-input">
			<label>快递运费</label>
			<p>{{addressPrice==0?'免运费':'10元'}}</p>
		</div>
		<div class="item-input">
			<label>店铺合计</label>
			<p>共{{cont}}件 <span>￥{{totalprice}}</span></p>
		</div>
		<order-bottom @shop="shopOrder" :price="totalprice"></order-bottom>
		<fab :topBtn="isTopBtn"></fab>
	</div>
</template>

<script>
	import fab from '@/components/fab'
	import { orderCart,getExpress,orderCartChange } from '@/api/goods';
	import { userAddress } from '@/api/address';
	import { getAuth,getAuthData } from '@/api/user';
    import { cart_confirm } from '@/api/payment'
	export default{
		data(){
			return{
				isTopBtn:false,
				shoppingCard:[],
				totalprice:'',
				dataInfo:{},
				addressData:'',
				addressId:'',
				cont:'',
				beizhu:'',
                addressPrice:0
			}
		},
		computed:{
		  userInfo(){
		      return getAuth();
		  },
		},
		components:{
			fab,
		},
		onShow(){
			// address
			userAddress(this.userInfo.username).then((res)=>{
			    if(res.data.status==1){
			    	for(var i=0;i<res.data.datas.length;i++){
			    		if(res.data.datas[i].is_default==1){
			    			this.addressData = res.data.datas[i]
			    			this.addressId =  res.data.datas[i].id;
			    			return
			    		}
			    	}
			    }else{
			    	this.addressData='';
			    	this.addressId='';
			    }
			})  
			orderCart({
			    'username':this.userInfo.username,
				ids:this.ids
			}).then((res)=>{
			   this.shoppingCard=[];
			   let datas = res.data.datas;
			   for(var key in datas){
			       if((typeof datas[key])=='object'){
			           this.shoppingCard=datas[key];
			       }else{
			           this.dataInfo[key]=datas[key]
			       }
			   }
               if(this.dataInfo.allGoodsMoney<50){
                   this.addressPrice = 10;
               }else{
                    this.addressPrice = 0;
               }
			    this.totalprice = this.dataInfo.allGoodsMoney +this.addressPrice ;
			    this.cont = this.dataInfo.allGoodsNum;
			   /* if(this.addressId==''){
				    this.addressPrice=-1;
					return
			   }
			   getExpress(this.userInfo.username,this.addressId,this.totalprice).then((res)=>{
				   this.addressPrice = res.data.datas.express;
				   this.totalprice = this.dataInfo.allGoodsMoney+this.addressPrice;
			   }) */
			})
		},
		onLoad(e) {
            let ids = JSON.parse(e.ids);
			if(typeof ids != 'object'){
				this.ids = ids
			}else{
				this.ids =ids.join(',');
			}
		},
		onPageScroll(e){
			if(e.scrollTop>=400){
				this.isTopBtn=true
			}
			if(e.scrollTop<=100){
				this.isTopBtn=false
			}
		},
		methods:{
			//计算总计函数
			countTotoal() {
				var total = 0,num=0;
				for (var i = 0; i < this.shoppingCard.length; i++) {
					for (var ii = 0; ii < this.shoppingCard[i].list.length; ii++) {
							total += Number(this.shoppingCard[i].list[ii].money) * Number(this.shoppingCard[i].list[ii].buyNum);
                            num+=Number(this.shoppingCard[i].list[ii].buyNum);
					}
				}
                if(total<50){
                    this.addressPrice = 10;
                }else{
                     this.addressPrice = 0;
                }
				this.totalprice = total+this.addressPrice ;
                this.cont = num;
			},
			addNum(item, index, indexItem) {
				item.buyNum++
				this.shoppingCard[index].list[indexItem].buyNum = item.buyNum;
				this.countTotoal();
				orderCartChange(
					this.userInfo.username,
					item.cartId,
					item.buyNum
				).then((res) => {})
			},
			clearNum(item, index, indexItem) {
				if (item.buyNum <= 1) {
					return
				}
				item.buyNum--
				this.shoppingCard[index].list[indexItem].buyNum = item.buyNum;
				this.countTotoal();
				orderCartChange(
					this.userInfo.username,
					item.cartId,
					item.buyNum
				).then((res) => {})
			},
			setAddress(){
				uni.navigateTo({
					url:'/pages/personal/address'
				})
			},
			go(url){
				uni.navigateTo({
					url
				})
			},
			shopOrder(){
				if(this.addressData.id==''){
					uni.showToast({
					    title: '请选择地址！',
					});
					return
				}
                let text;
                // #ifdef MP-WEIXIN
                    text='wxapp'
                // #endif
                
                // #ifdef MP-BAIDU
                    text='bdapp'
                // #endif
				// #ifdef APP-PLUS
				    text='app'
				// #endif
				cart_confirm(this.userInfo.username,this.ids,this.addressData.id,this.beizhu,text).then((res)=>{
					if(res.data.status==1){
						uni.redirectTo({
						    url: './payment?orderId='+res.data.datas.orderId
						});
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.grace-shoppingcard-goods-price {
		color: #ed1475;
		font-size: 32rpx;
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	
	.grace-shoppingcard-goods-number {
		padding: 2px 0;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	
		.numbutton {
			font-size: 40rpx;
		}
	
		.num {
			padding: 10rpx 20rpx;
			background: #f1f2f3;
	
		}
	}
	.addressPush-list{
		background: #fff;
		padding:20rpx;
		h3{
			width:140rpx;
			font-size:24rpx;
			color:#333;
		}
		li{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom:20rpx;
			.address-input{
				input{
					margin-bottom:20rpx;
					&:nth-last-of-type(1){
						margin-bottom: 0;
					}
				}
			}
			div{
				width:540rpx;
				input{
					padding:10rpx 20rpx;
					border:1px solid #eee;
					font-size:24rpx;
				}
			}
		}
	}
	.address-list{
		.li{
			margin:30rpx 0;
			padding:30rpx 0;
			.item-address{
				display: flex;
				justify-content: space-between;
				align-items: center;
				&>.hd-icon{
					margin-right:20rpx;
					color:#666;
					font-size:28rpx;
				}
			}
			background: url() no-repeat;
			background-size:100% 100%;
			.address-list-left{
				margin-left:20rpx;
				width:680;
				.address-list-left-top{
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-bottom:20rpx;
					h3{
						color:#343434;
						font-size:28rpx;
						margin-right:10rpx;
						span{
							color:#f37ca3;
							font-size:36rpx;
							margin-right:4rpx;
						}
					}
				}
				.address-list-left-bottom{
					color:#777;
					font-size:28rpx;
				}
			}
		}
	}
	.add{
		li{
			display: flex;
			justify-content: space-between;
			align-items: center;
			&>.hd-icon{
				margin-right:20rpx;
				color:#666;
				font-size:28rpx;
			}
		}
		.address-list-left-top{
			margin-left:20rpx;
			h3{
				color:#343434;
				font-size:28rpx;
				margin-right:10rpx;
				span{
					color:#f37ca3;
					font-size:36rpx;
					margin-right:4rpx;
				}
			}
		}
	}
	.goods-contianer{
		margin-top:30rpx;
		background: #fff;
		.goods-list{
			border-bottom: 1rpx solid #eee;
			.goods-item-shop{
				width:710rpx;
				margin:0 auto;
				border-bottom: 1rpx solid #eee;
				display: flex;
				justify-content: flex-start;
				padding:20rpx 0;
				align-items: center;
				i{
					margin-right:8rpx;
				}
			}
			.goods-item-top{
				width:710rpx;
				margin:0 auto;
				display: flex;
				justify-content: space-between;
				padding:20rpx 0;
				img{
					width:140rpx;
					height:140rpx;
				}
				.goods-item{
					width:550rpx;
					h3{
						color:#333;
						display: -webkit-box;
						text-overflow: ellipsis;
						overflow: hidden;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						font-size:28rpx;
					}
					div{
						margin-top:10rpx;
						display: flex;
						justify-content: space-between;
						h4{
							font-size:28rpx;
							color:#ababab;
						}
						h5{
							color:#9E9E9E;
							font-size:24rpx;
							span{
								color:#E91E63;
								margin-left:14rpx;
								font-weight: bold;
							}
						}
					}
				}
			}
		}
	}
	.item-input{
		display: flex;
		justify-content:space-between;
		background: #fff;
		border-bottom:1px solid #eee;
		padding:30rpx 0;
		&:nth-last-of-type(1){
			margin-bottom:40rpx;
		}
		label{
			margin-left:20rpx;
			color:#333;
			font-size:28rpx;
		}
		.msg{
			display: block;
			width:600rpx;
		}
		input{
			margin-right:20rpx;
			color:#333;
			font-size:28rpx;
		}
		p{
			margin-right:20rpx;
			color:#999;
			font-size:28rpx;
			span{
				color:#fd8197;
				margin-left:10rpx;
				font-weight: bold;
			}
		}
	}
</style>
